import React, { useEffect, useRef, useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { Card, DatePicker, Divider, Image, Modal, Button, Input } from "antd";
import ProDescriptions from "@ant-design/pro-descriptions";
import { set } from "lodash";
import { doFetch } from "@/utils/doFetch";
import { useRequest, useWebSocket } from "ahooks";
import AutoTable from "@/components/AutoTable";
import moment from "moment";

const Reback = ({ route }) => {
  let currentUser = localStorage.getItem("curuser");
  currentUser = JSON.parse(currentUser);
  const [params, setparams] = useState({});
  const [mparams, setmparams] = useState({});
  const [modalprops, setmodalprops] = useState({
    visible: false,
    title: "",
  });

  const { latestMessage } = useWebSocket(
    `ws://localhost:8501/webSocket/${currentUser.userId}/${currentUser.token}`
  );

  const columns = [
      {
        title: "项目名称",
        dataIndex: "projectName",
        key: "projectName",
      },
      {
        title: "楼栋",
        dataIndex: "building",
        key: "building",
      },
      {
        title: "单元",
        dataIndex: "unit",
        key: "unit",
      },
      {
        title: "使用层数",
        dataIndex: "useFloor",
        key: "useFloor",
      },
      {
        title: "模板名称",
        dataIndex: "boardTypeName",
        key: "boardTypeName",
      },
      {
        title: "返回工厂",
        dataIndex: "returnFactory",
        key: "returnFactory",
      },
      {
        title: "返厂时间",
        dataIndex: "returnTime",
        key: "returnTime",
      },
      {
        title: "返厂车牌号",
        dataIndex: "returnNo",
        key: "returnNo",
      },
      {
        title: "车牌区别号",
        dataIndex: "distinctNo",
        key: "distinctNo",
      },
      {
        title: "数量",
        dataIndex: "account",
        key: "account",
      },
      {
        title: "面积",
        dataIndex: "area",
        key: "area",
      },
      {
        title: "重量",
        dataIndex: "weight",
        key: "weight",
      },
      {
        title: "清点时间",
        dataIndex: "checkTime",
        key: "checkTime",
      },
      {
        title: "清点第一负责人",
        dataIndex: "checkFirstPerson",
        key: "checkFirstPerson",
      },
      {
        title: "清点第二负责人",
        dataIndex: "checkSecondPerson",
        key: "checkSecondPerson",
      },
      {
        title: "审核人",
        dataIndex: "auditPerson",
        key: "auditPerson",
      },
      {
        title: "状态",
        dataIndex: "statusName",
        key: "statusName",
      },
    ],
    columnes = [
      {
        title: "列表",
        dataIndex: "detailList",
        key: "detailList",
        colSize: 24,
        render: (_, row) => {
          return (
            <AutoTable
              columns={[
                {
                  title: "长度",
                  dataIndex: "length",
                  key: "length",
                  search: false,
                },
                {
                  title: "宽度",
                  dataIndex: "width",
                  key: "width",
                  search: false,
                },
                {
                  title: "是否起孔",
                  dataIndex: "isHaveHoleName",
                  key: "isHaveHoleName",
                  search: false,
                },
                {
                  title: "起始孔位",
                  dataIndex: "upHole",
                  key: "upHole",
                  search: false,
                },
              ]}
              dataSource={row.detailList}
              pagination="false"
              headerTitle={"详情"}
              withCard={false}
            ></AutoTable>
          );
        },
      },
      {
        title: "图片",
        dataIndex: "images",
        key: "images",
        span: 12,
        render: (_, row) => {
          return (
            <Image src="http://localhost:8121/00F60891427object.jpg"></Image>
          );
        },
      },
    ];
  let { data, loading, refresh } = useRequest(() => {
    return doFetch({ url: "/returnBoard/queryStatusOn" });
  });

  useEffect(() => {
    refresh();
  }, [latestMessage]);

  return (
    <>
      <Modal
        {...modalprops}
        footer={false}
        destroyOnClose
        onCancel={() => {
          setmodalprops((s) => ({
            ...s,
            visible: false,
            title: "筛选",
          }));
        }}
      >
        {modalprops?.title == "筛选" ? (
          <div style={{ display: "flex", flexDirection: "column" }}>
            <DatePicker
              placeholder="请选择日期"
              style={{ margin: "0 0 12px 0" }}
              onChange={(val) => {
                setparams((s) => ({
                  ...s,
                  createTime: val ? moment(val).format("YYYY-MM-DD") : null,
                }));
              }}
            ></DatePicker>
            <Input
              placeholder="请填写项目名称"
              style={{ marginBottom: 12 }}
              onChange={(e) => {
                setparams((s) => ({
                  ...s,
                  boardTypeNo: e.target.value,
                }));
              }}
            ></Input>

            <Button
              type="primary"
              onClick={() => {
                doFetch({
                  url: "/logDetail/exportExcel",
                  params,
                  responseType: "blob",
                });
              }}
            >
              导出
            </Button>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column" }}>
            <DatePicker.RangePicker
              placeholder={["请选择开始日期", "请选择结束日期"]}
              style={{ margin: "0 0 12px 0" }}
              onChange={(val) => {
                setmparams((s) => ({
                  createTimeList: val
                    ? [
                        moment(val[0]).format("YYYY-MM-DD"),
                        moment(val[1]).format("YYYY-MM-DD"),
                      ]
                    : null,
                }));
              }}
            ></DatePicker.RangePicker>
            <Button
              type="primary"
              onClick={() => {
                doFetch({
                  url: "/logDetail/exportExcelMonth",
                  params: mparams,
                  responseType: "blob",
                });
              }}
            >
              导出
            </Button>
          </div>
        )}
      </Modal>
      <Card
        title="日志列表"
        extra={[
          <a
            onClick={() => {
              setmodalprops((s) => ({
                ...s,
                visible: true,
                title: "筛选",
              }));
            }}
          >
            单日/项目导出
          </a>,
          <Divider type="vertical" />,
          <a
            onClick={() => {
              setmodalprops((s) => ({
                ...s,
                visible: true,
                title: "选择时间段",
              }));
            }}
          >
            月度导出
          </a>,
        ]}
      >
        <ProDescriptions
          columns={columns}
          dataSource={data?.data?.data ?? {}}
        ></ProDescriptions>
        <ProDescriptions
          columns={columnes}
          dataSource={data?.data?.data ?? {}}
          column={1}
        ></ProDescriptions>
      </Card>
    </>
  );
};

export default Reback;
